<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>get请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script type="text/javascript">
        // 文档加载完
        window.onload = function () {
            // 创建vue实例
            var vue = new Vue({
                el: '#app',      // 指定渲染的html元素
                data: {          // 数据对象
                    userList: [] // 用户数据
                },
                methods: {   // 操作方法
                    // 查询用户数据
                    search() {
                        // 发送异步请求
                        axios.get("/findAll").then((response) => {
                            this.userList = response.data;
                        }).catch((error) => {   // 请求出错
                            console.log(error);
                        });
                    }
                },
                // 生命周期中的钩子函数
                created : function () {
                    this.search();
                }
            });
        };
    </script>
</head>
<body>
<div id="app">
    <table border="1" width="90%" align="center"
           style="border-collapse: collapse;">
        <tr>
            <th>用户id</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>备注</th>
            <th>创建时间</th>
            <th>修改时间</th>
        </tr>
        <tr v-for="user in userList">
            <td>{{user.id}}</td>
            <td>{{user.userName}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex==1?'男':'女'}}</td>
            <td>{{user.birthday}}</td>
            <td>{{user.note}}</td>
            <td>{{user.created}}</td>
            <td>{{user.updated}}</td>
        </tr>
    </table>
</div>
</body>
</html>